<!-- 登陆 -->
<template>
  <div class="login-wp">
    <div class="form-box">
        <div class="logo-site">
          <img src="~@/assets/image/logofff.png">
        </div>
        <div class="content">
          <div class="login-box">
            <div class="title">登录 / LOGIN</div>
            <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="submit">
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入用户名">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model="form.pwd" type="password" placeholder="请输入密码">
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="key">
                <div class="clearfix key-box">
                  <el-input class="key-ipt pull-left" v-model="form.key" placeholder="请输入验证码">
                    <i slot="prefix" class="el-input__icon el-icon-key"></i>
                  </el-input>
                  <div class="key-btn pull-right">
								    <canvas class="yzm-img" ref="code" @click="setDrawCode">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
							    </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="row1 clearfix">
                  <el-checkbox class="pull-left" v-model="form.checked">记住密码</el-checkbox>
                  <!-- <router-link class="pull-right" to="/login">忘记密码？</router-link> -->
                </div>
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading" class="submit-btn" type="warning" @click="submit()">登 录</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
    </div>
    

  </div>
</template>
<script>

export default {
  name: 'login',
  data () {
    return {
      form: {
        // 市级卫健委
        // name: 'admin',
        // pwd: 'yd123456',
        // 大渡口卫健委
        // name: 'ddkwjw',
        // pwd: '123456',

        // 医院
        name: 'csyy',
        pwd: '123456',

        key: '',
        checked: false,
      },
      show_num: [],
      // 验证规则
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        key: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },

      loading: false,

    }
  },
  mounted () {
    this.setDrawCode();
  },
  methods: {      
    // 设置登陆初始参数
    setLoginParam () {
      
    },

    // 登录
    submit () {
      window.location.href = '/hosp/home';
      
    },

    //生成验证图片
    setDrawCode () {
      this.drawCode({
        obj: this.$refs.code,
        width: 120,
        height: 40,
        show_num: this.show_num
      });
    },
    /*
    作用：生产验证码
    参数：obj->dom对象，width->宽度， height->高度，show_num->用来保存验证码的数组
    */
    drawCode ({obj, width, height, show_num}) {
      var canvas_width=width;
      var canvas_height=height;
      var canvas = obj;
      var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length;//获取到数组的长度

      for (var i = 0; i < 4; i++) {  //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
        var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
        // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
        var deg = Math.random() - 0.5; //产生一个随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) { //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) { //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    },

    randomColor: function () {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },  

  }
}
</script>
<style lang="scss" scoped>
.login-wp {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  background: #E0D09E url(~@/assets/image/backgrund.png);
  background-size: cover;

  .form-box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -210px;
    margin-top: -300px;
    width: 420px;
    height: 600px;
    padding-top: 140px;
    box-sizing: border-box;

    .logo-site  {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -330px;
      width: 660px;
      height: 103px;
    }

    .content {
      text-align: center;
    }

    .login-box {
      padding: 35px;
      height: 430px;
      background: #fff;
      box-shadow: 0 2px 29px  0px rgba(0, 0, 0, 0.18);
      border-radius: 10px;
      box-sizing: border-box;

      .title {
        height: 29px;
        color: #385126;
        font-weight: 400;
        font-family: Source Han Sans CN;
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 30px;
      }

      .key-box {
        .key-ipt {
          width: 62%;
        }
        .key-btn {
          width: 35%;
          height: 40px;
          background: #eee;
        }
      }

      .row1 {
        line-height: 20px;
      }

      .submit-btn {
        width: 100%;
      }
    }
  }
}
</style>